<!--  -->
<template>
<div class='liveDetailbox'>
    <div class="liveInfo">
        <div class="left">
            <img class="imgs" src="../../../../../assets/img/wyb.jpeg" alt="">
            <div>
                <div>{{detailInfo.title}}</div>
                <div>开播时间{{detailInfo.timer}}</div>
                <div>结束时间{{detailInfo.timer2}}</div>
                <div>直播时长{{detailInfo.duration}}</div>
                <div>主播人：{{detailInfo.name}}</div>
            </div>
        </div>
        <div class="right">
            <dl>
                <dt><i class="el-icon-view"></i></dt>
                <dd>
                    <p>观看人数</p>
                    <p>7,732人</p>
                </dd>
            </dl>
            <dl>
                <dt><i class="el-icon-user"></i></dt>
                <dd>
                   <p>最高在线人数</p>
                   <p>7,732人</p>
                </dd>
            </dl>
            <dl>
                <dt><i class="el-icon-office-building"></i></dt>
                <dd>
                    <p>新增粉丝数</p>
                    <p>7,732人</p>
                </dd>
            </dl>
            <dl>
                <dt><i class="el-icon-school"></i></dt>
                <dd>
                    <p>购买人数</p>
                    <p>7,732人</p>
                </dd>
            </dl>
        </div>
    </div>
    <div class="liveCount">
        <h4>直播次数分析</h4>
        <div id="main" style="width: 100%; height: 460px"></div>
    </div>
    <div class="liveOrder">
        <h4>订单反馈分析</h4>
        <div id="mains" style="width: 100%; height: 460px"></div>
    </div>
    <div class="liveTable">
        <div class="sellShop">销售商品分析</div>
        <div class="tableList">
             <el-table
                :data="tableData"
                border
                style="width: 100%"
                :header-cell-style="{textAlign: 'center'}"
                :cell-style="{textAlign:'center'}">
                <el-table-column
                prop="id"
                label="商品ID"
                width="180">
                </el-table-column>
                <el-table-column
                label="商品图片"
                width="180">
                <img class="tupianImg" src="../../../../../assets/img/wyb.jpeg" alt="">
                </el-table-column>
                <el-table-column
                prop="title"
                label="商品名称">
                </el-table-column>
                <el-table-column
                prop="price"
                label="商品价格"
                width="180">
                </el-table-column>
                <el-table-column
                prop="img"
                label="商品规格"
                width="180">
                </el-table-column>
                <el-table-column
                prop="count"
                label="点击次数">
                </el-table-column>
                <el-table-column
                prop="order"
                label="下单次数">
                </el-table-column>
            </el-table>
        </div>
        <div class="foot">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-sizes="[5, 7, 9]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalNum">
                    </el-pagination>
            </div>
    </div>
</div>
</template>

<script>
import {apiLiveDetailLive} from "../../../../../api/liveList"
import * as echarts from "echarts";
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  detailInfo:{},
  tableData: [],
  pageSize:5,
  pageIndex:1,
  totalNum:0,//总数据
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
   async getDetail(){
       const res=await apiLiveDetailLive({//请求数据
            pageSize:this.pageSize,
            pageIndex:this.pageIndex
       })
       this.tableData=res.data
       this.totalNum=res.totalNum
    },
    handleSizeChange(val){//每页显示个数
         this.pageSize=val
         this.getDetail()
    },
    handleCurrentChange(val){//显示第几页
         this.pageIndex=val
         this.getDetail()
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.detailInfo=this.$route.params
    this.getDetail()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;

    var chartDom1 = document.getElementById("mains");
    var myChart1 = echarts.init(chartDom1);
    var option1;

    option = {
      xAxis: {
        type: "category",
        data: ["2021-1-1", "2021-1-2", "2021-1-3", "2021-1-4", "2021-1-5", "2021-1-6", "2021-1-7"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: [550, 2130, 2300, 2006, 2912, 1832, 1020],
          type: "line"
        },
         {
          data: [450, 1300, 1224, 1218, 1635, 647, 860],
          type: "line"
        },
         {
          data: [350, 1090, 1844, 1218, 935, 847, 760],
          type: "line"
        }
      ]
    };

    option1 = {
      xAxis: {
        type: "category",
        data: ["2021-1-1", "2021-1-2", "2021-1-3", "2021-1-4", "2021-1-5", "2021-1-6", "2021-1-7"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line"
        },
        {
          data: [350, 430, 314, 328, 235, 347, 460],
          type: "line"
        },
        {
          data: [300, 330, 214, 358, 215, 267, 410],
          type: "line"
        }
      ]
    };

    option && myChart.setOption(option);
    option && myChart1.setOption(option1);
  }
}
</script>
<style lang='scss' scoped>
.liveDetailbox{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
    .liveInfo{
        display: flex;
        width: 100%;
        height:200px;
        .left{
            width: 40%;
            display: flex;
            border-right: 2px solid skyblue;
            .imgs{
                width: 200px;
                height: 180px;
            }
            div{
                display: flex;
                flex-direction: column;
                padding-left: 5px;
                padding-top: 3px;
                font-size: 20px;
            }
        }
        .right{
            flex:1;
            display: flex;
            padding: 0 20px;
            dl{
                width: 280px;
                display: flex;
                align-items: center;
                padding: 0 15px;
                dt{
                    i{
                        font-size: 40px;
                        color:rgb(36, 140, 182)
                    }
                }
                dd{
                    p:nth-child(2){
                        color:rgb(36, 140, 182)
                    }
                }
                
            }
        }
    }
    .liveCount{
        margin-top: 10px;
        display: flex;
        flex-direction: column;
    }
    .liveOrder{
        margin-top: 10px;
        display: flex;
        flex-direction: column;
    }
    .liveTable{
        display: flex;
        flex-direction: column;
        height: 400px;
        .sellShop{
            height: 40px;
            line-height: 40px;
            font-weight: bold;
        }
        .tupianImg{
            width: 100px;
            height: 100px;
        }
        .foot{
            margin-top: 5px;
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>